<template>
	<div class="root">
		<div class="box">
			<el-row>
				<el-col :span="12">
					<div><img src="@/assets/back.jpg" width="400px" height="500px" /></div>
				</el-col>
				<el-col :span="12">
					<div class="login">
						<h2>用户登录</h2>
						<div class="item">
							<linebox type="text" @textChanged="sender => { this.model.username = sender;}"></linebox>
							<span>用户名</span>
						</div>
						<div class="item">
							<linebox type="password" @textChanged="sender => { this.model.password = sender; }"></linebox>
							<span>密码</span>
						</div>
						<div class="item">
							<div class="subitem">
								<div class="cdiv">
									<linebox type="text" @textChanged=" sender => { this.model.code = sender; }"></linebox>
								</div>
								<div class="code" @click="changeCode"><img :src="imgUrl" width="100%" height="30px" /></div>
							</div>
							<span>验证码</span>
						</div>
						<div class="item">
							<button class="loginbtn" @click="onClick" v-loading.fullscreen.lock="loading">登录</button>
						</div>
					</div>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script>
import linebox from '@/components/common/linebox.vue';
export default {
	data() {
		return {
			model: {
				username: '',
				password: '',
				code: '',
				key: ''
			},
			loading: false,
			baseUrl: process.env.VUE_APP_ADMIN_BASE_URL + 'kaptcha',
			imgUrl: ''
		};
	},
	components: {
		linebox
	},
	created() {
		this.model.key = this.randomNum(24, 16);
		this.changeCode();
		sessionStorage.removeItem('token');
		sessionStorage.removeItem('expire');
	},
	methods: {
		async onClick() {
			if (this.model.username.length < 1) {
				this.$message('用户名不能为空！');
			} else if (this.model.password.length < 1) {
				this.$message('密码不能为空！');
			} else {
				this.loading = true;
				const res = await this.$https.postXform('/login', this.model);
				if (res.data.code === 200) {
					let data = res.data.data;
					sessionStorage.setItem('token', data.token);
					sessionStorage.setItem('expire', data.expire);
					sessionStorage.setItem('name', data.name);
					sessionStorage.setItem('avatar', data.avatar);
					sessionStorage.setItem('userType', data.userType);
					this.$router.push('/home');
				} else {
					this.$message(res.data.msg);
				}
				this.loading = false;
			}
			this.changeCode();
		},
		async changeCode() {
			this.imgUrl = this.baseUrl + '?key=' + this.model.key + '&random=' + Math.random();
		},
		randomNum(len, radix) {
			const chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
			const uuid = [];
			radix = radix || chars.length;
			if (len) {
				// Compact form
				for (let i = 0; i < len; i++) {
					uuid[i] = chars[0 | (Math.random() * radix)];
				}
			} else {
				// rfc4122, version 4 form
				let r;
				// rfc4122 requires these characters
				uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';
				uuid[14] = '4';
				// Fill in random data.  At i==19 set the high bits of clock sequence as
				// per rfc4122, sec. 4.1.5
				for (let i = 0; i < 36; i++) {
					if (!uuid[i]) {
						r = 0 | (Math.random() * 16);
						uuid[i] = chars[i === 19 ? (r & 0x3) | 0x8 : r];
					}
				}
			}
			return uuid.join('') + new Date().getTime();
		}
	}
};
</script>

<style lang="less">
.root {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	width: 100%;
	height: 100%;
	background-color: skyblue;
}
.box {
	width: 800px;
	height: 500px;
	display: block;
	background-color: white;
}
.login {
	display: flex;
	position: relative;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	height: 500px;
	width: 400px;
}
.item {
	display: flex;
	flex-direction: column-reverse;
	margin: 10px;
	position: relative;
	padding: 0 50px;
	width: 100%;
	span {
		color: gray;
		font-size: 14px;
	}
	.input_:hover + span {
		color: skyblue;
	}
}
.subitem {
	display: flex;
	flex-direction: row;
	position: relative;
	.cdiv,
	.code {
		display: block;
		width: 50%;
		height: 30px;
	}
}
.subitem:hover + span {
	color: skyblue;
}
.loginbtn {
	position: relative;
	outline: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 30px;
	border: none;
	color: white;
	background: linear-gradient(to right, pink, skyblue);
	transition: all 1s linear;
}
.loginbtn:hover {
	background: #666666;
}
</style>
